<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>count:{{count}}</p>
        <p>doubleCount:{{doubleCount}}</p>
        <p>tripleCount:{{tripleCount}}</p>
        <p>
            <button @click="addCount">count++</button>
        </p>
    </div>
</body>
<script>
    // Vue给我们提供了监听数据变化的方法 => 侦听器 
    // 1. 可以监听data中数据的变化,并执行对应的回调函数,执行一系列副作用操作( 当前数据变化之后,对其他数据造成的影响 ) => 默认是浅层的
    // 2. 支持异步   


    // computed 计算属性  (依赖于现有的数据得到一个新数据  => 默认被动变化)
    // 1. 是一个属性, 属性值依赖于data中一个或多个数据的得到的一个新值(派生值,衍生值), 对应的函数默认在实例化对象创建只有, 模板编译为虚拟DOM之前执行一次, 函数的返回值就是属性的初始值
    // 2. 计算属性是基于它们的响应式依赖进行缓存的
    // 3. 不支持异步

    // watch  侦听器(数据监听)   (被监听的数据发生改变之后 对其他数据造成的影响 => 主动变化)
    // 1. 监听data/计算属性中数据的变化,并执行对应的回调函数(对应属性的属性值发生改变)  => 更注重自身数据的变化对其他数组造成的影响
    // 2. 支持异步
    // 3. watch在初始化阶段并不执行, 而是在数据改变之后才执行

    // 公司的员工A => 对 上司 老板 造成了影响 


    var vm= new Vue({
        // el:"#app",
        data:{
            count:1,
            doubleCount:2,
            tripleCount:3,
            timer:null,
        },
        methods: {
            addCount(){
                this.count++
            }    
        },
        watch:{
            // 对data中的某个属性/计算属性 进行监听, 如果该属性发生变化,可以执行对应的回调函数(执行一系列副作用操作 -> 当前数据变化之后,对其他数据造成的影响)

            // watch中对象的键名 => 监听的数据的属性名
            // watch中对象的键值 => 回调函数,被监听的属性的值发生变化时执行 => 回调函数有两个参数, 分别表示新值和旧值
            count:function(newVal,oldVal){
                console.log("count发生了改变",newVal,oldVal);  

                // this.doubleCount = this.count * 2;
                // this.tripleCount = this.count * 3;

                clearTimeout(this.timer);
                this.timer = setTimeout(()=>{
                    this.doubleCount = this.count * 2;
                    this.tripleCount = this.count * 3;
                },2000);
            }

        }
    })

    vm.$mount("#app");

</script>
</html>